import type { Metadata } from 'next';
import Link from 'next/link';
import { notFound } from 'next/navigation';
import { PageHeader } from '@/components/ui/page-header';
import { Stat } from '@/components/ui/primitives';
import { AssetBrowser } from '@/components/market/asset-browser';
import { Suspense } from 'react';
import { Skeleton } from '@/components/ui/primitives';
import { getBrandStats } from '@/lib/queries/markets';
import { catName } from '@/lib/taxonomy';
import { fmtMoney, fmtNum } from '@/lib/format';
import type { SP } from '@/lib/search-params';

export const revalidate = 300;

export async function generateMetadata({ params }: { params: Promise<{ brand: string }> }): Promise<Metadata> {
  const { brand } = await params;
  const name = decodeURIComponent(brand);
  return { title: `${name} collectibles`, description: `${name}: tracked collectible assets, valuations, sales and listings on RareIndex.` };
}

export default async function BrandPage({ params, searchParams }: { params: Promise<{ brand: string }>; searchParams: Promise<SP> }) {
  const { brand } = await params;
  const sp = await searchParams;
  const name = decodeURIComponent(brand);
  const stats = await getBrandStats(name);
  if (!stats) notFound();
  return (
    <div>
      <PageHeader
        crumbs={[{ label: 'Markets', href: '/markets' }, { label: stats.brand }]}
        title={stats.brand}
        description="Brand view across every category where this brand appears."
        meta={stats.categories.map((c) => (
          <Link key={c} href={`/markets/${c}`} className="rounded-sm bg-inset px-1.5 py-0.5 hover:text-fg">
            {catName(c)}
          </Link>
        ))}
      />
      <section className="grid grid-cols-2 gap-px overflow-hidden rounded-md border border-border bg-border sm:grid-cols-3 lg:grid-cols-6">
        {[
          ['Tracked assets', fmtNum(stats.assets)],
          ['With valuation', fmtNum(stats.priced)],
          ['Sales', fmtNum(stats.sales)],
          ['Active listings', fmtNum(stats.listings)],
          ['Median RIV', stats.medianRivUsd != null ? fmtMoney(stats.medianRivUsd) : '—'],
          ['Top RIV', stats.maxRivUsd != null ? fmtMoney(stats.maxRivUsd) : '—'],
        ].map(([k, v]) => (
          <div key={k} className="bg-elevated px-3 py-2.5">
            <Stat label={k} value={v} />
          </div>
        ))}
      </section>
      <div className="mt-4">
        <Suspense fallback={<Skeleton className="h-96" />}>
          <AssetBrowser scope={{ brand: name }} sp={sp} basePath={`/brand/${brand}`} title={`${stats.brand} assets`} pageSize={60} />
        </Suspense>
      </div>
    </div>
  );
}